<template>
  <div>
    <h4>我是子</h4>
    <h5>{{ count }}</h5>
    <button @click="deletes">卸载</button>
    <hr />
    <!-- 给绑定事件@ 不要写成：@    
            当子组件的内容发生变化的时候，利用子组件$emit（）来调用函数并且传参，实现子传方法
    -->
    <!-- <Tab @changehandles ="changehandles" /> -->
    <Tab ref="attub" />
  </div>
</template>

<script>
import Tab from "./Tab/Tab.vue";
export default {
  name: "List",
  components: {
    Tab,
  },
  data() {
    return {
      count: 0,
    };
  },
  methods:{
  //     changehandles(count){
  //         this.count = count
  //         this.$emit("changehande",count)
  //     }
      deletes() {
      this.$off("changehande");
    },
  },
  mounted() {
    //也可以设置初始的时候手动设置函数这样就不用在函数上写，利用$ref获取组件，利用this.$refs.xxx.$on设置函数 也可也拿到对应的数据

    this.$refs.attub.$on("changehandles", (count) => {
      this.count = count;
      this.$emit("changehande", count);
    });
  },
};
</script>

<style>
</style>